<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading提示组件</title>
    <link rel="stylesheet" href="../src/sea-ui.css">
</head>

<body>
    <div class="sea-content">

        <!-- 页面加载提示组件 -->
        <h1 class="sea-panel-title">页面加载提示组件</h1>
        <div class="sea-panel-body">
            <div class="sea-loading">
                <i class="fa fa-circle-o-notch fa-spin sea-loading-icon"></i>
                <p class="sea-loading-info">用力加载中...</p>
            </div>
            <div class="sea-loading">
                <i class="fa fa-refresh sea-loading-icon"></i>
                <p class="sea-loading-info">加载出错，点我重新加载</p>
            </div>
        </div>

        <!-- 单行加载提示组件 -->
        <h1 class="sea-panel-title">页面加载提示组件</h1>
        <div class="sea-panel-body">
            <div class="sea-loading-inline">
                <div class="sea-loading-info">
                    <i class="fa fa-circle-o-notch fa-spin tt-loading-icon"></i>
                    <span>用力加载中</span>
                </div>
            </div>
            <div class="sea-loading-inline">
                <div class="sea-loading-info">
                    <span> 上拉加载更多</span>
                    <i class="fa fa-long-arrow-up fa-vibrate-y  tt-loading-icon"></i>
                </div>
            </div>
            <div class="sea-loading-inline">
                <div class="sea-loading-info">
                    <span> 我可是有底线的</span>
                </div>
            </div>
            <div class="sea-loading-inline">
                <div class="sea-loading-info">
                    <span>.</span>
                </div>
            </div>
        </div>




    </div>
</body>

</html>